<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form">
      <el-form-item label="项目名" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" placeholder="请输入项目名" size="small"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="压缩包" prop="packageUrl">
        <el-upload
          class="upload-demo"
          drag
          action="/api/v1/upload"
          accept=".zip"
          :on-success="upload"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将zip文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" native-type="submit" @click.prevent="submit">
          保存并解压
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { api } from '~/assets/utils'
import { Loading } from 'element-ui'
export default {
  layout: 'project',
  data() {
    return {
      fileList: [],
      rules: {
        name: [
          { required: true, message: '请输入项目包', trigger: 'change' }
        ],
        packageUrl: [
          { required: true, message: '请上传压缩包', trigger: 'change' }
        ]
      },
      form: {
        name: '',
        packageUrl: ''
      }
    }
  },
  mounted() {
    console.log(this.$route)
    const { id, name, packageUrl } = this.$route.query
    this.form = { id, name, packageUrl }
    if (id) {
      this.fileList = [{
        name: packageUrl
      }]
    }
  },
  methods: {
    upload(res) {
      this.form.packageUrl = res.url
    },
    submit() {
      const loading = Loading.service({ fullscreen: true })
      this.form.projectId = this.$route.params.projectId
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post(api.updateModule, this.form).then((data) => {
            this.fileList = [{
              name: data.packageUrl
            }]
            this.$message({
              type: 'success',
              message: data.msg
            })
            loading.close()
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container{
  padding: 30px;
}
</style>
